<template>
	<view class="content util-page-height">
		<view class="uni-flex uni-column uni-common-mt util-full-height util-flex-mian-center">
			<uni-popup ref="popup" type="message">
				<uni-popup-message :type="popup.type" :message="popup.message" :duration="2000"></uni-popup-message>
			</uni-popup>
			<view class="header"></view>
			<view class="main">
				<view class="uni-flex uni-row">
					<label class="uni-flex uni-label label" for="username">
						<text class="label-text">用户名</text>
					</label>
					<uni-easyinput id="username" class="input" v-model="username" placeholder="请输入用户名"></uni-easyinput>
				</view>
				<view class="uni-flex uni-row uni-common-mt">
					<label class="uni-flex uni-label" for="password">
						<text class="label-text">密码</text>
					</label>
					<uni-easyinput id="password" type="password" class="input" v-model="password" placeholder="请输入密码"></uni-easyinput>
				</view>
				<view class="uni-flex uni-row button-group">
					<button class="button" type="primary" :loading="inProcess" :disabled="inProcess" @click="navigateToIndex">登录</button>
					<!-- <button class="button" disabled="disabled" @click="navigateToRegister">注册</button> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: "test",
				password: "123456",
				popup: {
					type: "success",
					message: "登录成功"
				},
				inProcess: false
			}
		},
		onLoad() {

		},
		methods: {
			async navigateToIndex() {
				this.executing();
				const result = await this.$API.Community.login({
					userid: this.username,
					password: this.password
				});
				this.completed();
				if (result && result.success) {
					result.token && this.$API.Community.setCommunityIdentifier(result.token);
					result.id && this.$API.Community.setListIdentifier(result.id);
					uni.navigateTo({
						url: "./index",
						success: res => {
							res.eventChannel.emit('acceptDataFromOpenerPage', { data: result })
						}
					});
				} else {
					this.popupMessage("error", result.message);
				}
			},
			navigateToRegister() {
				uni.navigateTo({ url: "./register" });
			},
			popupMessage(type, message) {
				this.popup.type = type;
				this.popup.message = message;
				this.$refs.popup.open("top");
			},
			executing() {
				this.inProcess = true;
			},
			completed() {
				this.inProcess = false;
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.header {
		flex: 2;
	}

    .main {
		flex: 5;
	}

	.uni-label {
		justify-content: left;
		align-items: center;
	}

	.input {
		width: 400rpx;
		overflow: hidden;
		border-radius: 4px;
		background: #fff;
	}

	.button-group {
		margin: 100rpx auto 0;
		justify-content: center;
	}
	
	.button {
		/* width: 240rpx; */
		width: 100%;
		margin: 0;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
	}
</style>
